<template>
    <div class="gzzs">
        <div class="carousel-3">
            <img
                class="bg-img"
                :src="carousel3[c3Index].img"
                :alt="carousel3[c3Index].title"
            />
            <div v-show="c3Index == 0" class="chatby"></div>
            <div v-show="c3Index == 0" class="chat" ref="chatList">
                <div style="height: 30px"></div>
                <template v-for="(item, index) in chatData2">
                    <div
                        v-if="item.type == 'user'"
                        :key="index + 'ai'"
                        class="chat-user"
                    >
                        <div class="text">{{ item.msg }}</div>
                        <img
                            class="avatar"
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/assets/img/avatar.png"
                            alt=""
                        />
                    </div>
                    <div
                        v-if="item.type == 'ai'"
                        :key="index + 'ai'"
                        class="chat-ai"
                    >
                        <img
                            class="avatar"
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyzs-ai.png"
                            alt=""
                        />
                        <div class="text">
                            {{ item.msg }}
                        </div>
                    </div>
                </template>

                <div style="height: 30px"></div>
            </div>
            <div
                v-for="(item, index) in carousel3"
                :key="index"
                class="item"
                :class="{ active: index == c3Index }"
                @mouseover="mouseover(index)"
                @click="goLink(item)"
            >
                <div class="title">
                    {{ item.title }}
                </div>
                <div class="info">
                    {{ item.text }}
                </div>
                <div class="link">
                    了解详情<i class="el-icon-arrow-right"></i>
                </div>
                <div class="bg-active"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    async asyncData({ params }) {
        let data = {};
        return data;
    },
    layout: "home",
    head() {
        return {
            title: "会计知识专业问答-财税会计知识问答-小竹财税官网",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    components: {},
    data() {
        return {
            carousel3: [
                {
                    title: "财税人专属AI",
                    titleEn: "Solutions Base",
                    text: "我们为什么要做财税AI？因为我们觉得财税人一定要有自己的专属AI，用起来更放心，放心使人更快乐。",
                    img: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyzs-group1.png",
                    link: "/chatgpt/xzcsgpt",
                },
                {
                    title: "财税专家真人线上1V1问答",
                    titleEn: "Regulations Library",
                    text: "冠军团队、更专业、更放心",
                    img: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyzs-group2.png",
                    link: "/cswd",
                },
                {
                    title: "实操课程",
                    titleEn: "Fiscal And Taxation Experts Online",
                    text: "从理论到实践，经历过才会更懂你！被人懂，就会更快乐！",
                    img: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyzs-group3.png",
                    link: "/indices/xzxy-xzzy?type=2",
                },
                {
                    title: "会计考证",
                    titleEn: "Xiaozhu College",
                    text: "你走过的每一步，都会留下深深的脚印，回头看时，你会感谢那个努力的自己",
                    img: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyzs-group4.png",
                    link: "/indices/xzxy-xzzy?type=1",
                },
            ],
            c3Index: 0,

            chatData: [
                { type: "user", msg: "你是谁？" },
                {
                    type: "ai",
                    msg: "我是财税AI，是小竹财税开发的专属财税人的人工智能。我最擅长的就是回答各种各样的财税问题，除此之外我还上知天文、下知地理，所以你还可以问我其他方面的问题，例如科学知识、历史事件、生活常识、文化娱乐等。快来考考我吧！",
                },
                {
                    type: "user",
                    msg: "小竹财税是干什么的？",
                },
                {
                    type: "ai",
                    msg: "向财税人传播快乐.幸福，解决财税人职业生涯中遇到的各类问题，让每个财税人都有一个懂你的职业顾问",
                },
                {
                    type: "user",
                    msg: "你们为什么要做小竹这件事？",
                },
                {
                    type: "ai",
                    msg: "小竹财税想通过自己的力量去影响更多的组织和伙伴，一起去解决财税人职业生涯中遇到的各种问题，通过解决当下遇到的问题获得更多的物质与精神财富来让我们财税人变得更快乐，另外还要解决财税人在工作和生活中产生的情绪，找到心灵的放松，让内心更加平静和满足，继而获得幸福。然后通过我们每个受到影响的财税人一起去传播快乐.幸福。",
                },
                {
                    type: "user",
                    msg: "那我在小竹平台能获得什么？",
                },
                {
                    type: "ai",
                    msg: "还请小主点我一下，打开只属于我们的聊天页面，亲自问我一下哦",
                },
            ],
            chatData2: [],
            times: null,
        };
    },
    beforeMount() {},
    created() {},
    mounted() {
        this.lookChat();
        this.times = setInterval(() => {
            this.lookChat();
            this.scrollBottom();
        }, 85);
    },
    // 销毁前重置body样式
    beforeDestroy() {
        clearInterval(this.times);
        this.times = null;
    },
    computed: {},
    watch: {},
    methods: {
        lookChat() {
            console.log(this.chatData2);
            if (
                this.chatData2.length == 0 &&
                this.chatData2.length < this.chatData.length
            ) {
                this.chatData2.push({
                    type: this.chatData[this.chatData2.length].type,
                    msg: "",
                });
            }

            if (
                this.chatData2[this.chatData2.length - 1].msg !=
                this.chatData[this.chatData2.length - 1].msg
            ) {
                this.chatData2[this.chatData2.length - 1].msg +=
                    this.chatData[this.chatData2.length - 1].msg[
                        this.chatData2[this.chatData2.length - 1].msg.length
                    ];
            } else if (
                this.chatData2[this.chatData2.length - 1].msg ==
                    this.chatData[this.chatData2.length - 1].msg &&
                this.chatData2.length < this.chatData.length
            ) {
                this.chatData2.push({
                    type: this.chatData[this.chatData2.length].type,
                    msg: "",
                });
            } else if (
                this.chatData2[this.chatData2.length - 1].msg ==
                    this.chatData[this.chatData2.length - 1].msg &&
                this.chatData2.length == this.chatData.length
            ) {
                return;
            }
        },
        // 鼠标移入
        mouseover(index) {
            this.c3Index = index;
        },
        goLink(item) {
            if (item.link) this.$router.push({ path: item.link });
        },

        // 滚动到底部
        scrollBottom() {
            this.$nextTick(() => {
                this.$refs.chatList.scrollTop =
                    this.$refs.chatList.scrollHeight;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.gzzs {
    height: calc(100vh - 150px);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.carousel-3 {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;

    .chat {
        width: 19.9vw;
        height: 33.3vw;
        background: rgba(0, 38, 84, 0.8);
        border-radius: 20px;
        border: 1px solid #75b3ff;
        position: absolute;
        right: 84px;
        z-index: 110;
        top: calc(50vh - 75px - 16.15vw);
        padding: 0 1vw;
        overflow: auto;
        &::-webkit-scrollbar {
            width: 0;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #f3f3f3;
        }

        &::-webkit-scrollbar-track {
            border-radius: 0;
        }
        .chat-ai {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            margin-bottom: 20px;
            .text {
                font-weight: 400;
                font-size: 0.9vw;
                color: #ffffff;
                line-height: 1.5vw;
                margin-left: 10px;
                padding: 0.56vw 1vw;
                max-width: 15vw;
                background: rgba(255, 255, 255, 0.15);
                box-shadow: 0px 4px 10px 0px rgba(12, 113, 237, 0.1);
                border-radius: 0 15px 15px 15px;
                position: relative;
                top: 6px;
            }
            .avatar {
                width: 3.2vw;
                height: 3.2vw;
                border-radius: 3.2vw;
                object-fit: cover;
            }
        }
        .chat-user {
            display: flex;
            align-items: flex-start;
            justify-content: flex-end;
            margin-bottom: 16px;
            .text {
                font-weight: 400;
                font-size: 0.9vw;
                color: #ffffff;
                line-height: 1.5vw;
                border-radius: 15px 15px 0px 15px;
                margin-right: 10px;
                padding: 0.56vw 1vw;
                max-width: 15vw;
                background: #0c71ed;
                position: relative;
                top: 6px;
            }
            .avatar {
                width: 3.2vw;
                height: 3.2vw;
                border-radius: 3.2vw;
                object-fit: cover;
            }
        }
    }

    .chatby {
        filter: blur(1px);
        width: 19.9vw;
        height: 33.3vw;
        background: rgba(47, 136, 246, 0.15);
        box-shadow: 0px 4px 10px 0px rgba(32, 32, 32, 0.3);
        border-radius: 20px 20px 20px 20px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        position: absolute;
        z-index: 19;
        right: 92px;
        top: calc(50vh - 75px - 16.15vw);
    }

    .bg-img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        object-fit: cover;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .item {
        position: relative;
        z-index: 10;
        width: 25%;
        height: 100%;
        color: #ffffff;
        // border-right: 1px solid rgba(255, 255, 255, 0.3);
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        &:nth-last-child(1) {
            border-right-width: 0;
        }

        .title {
            position: relative;
            z-index: 101;
            width: 100%;
            text-align: center;
            font-size: 30px;
            color: #ffffff;
            width: 100%;
            transition: opacity 1.8s cubic-bezier(0, 0, 0, 1);
            opacity: 0;
        }

        .en {
            width: 100%;
            text-align: center;
            font-size: 26px;
            color: #ffffff;
            padding-bottom: 140px;
            padding-top: 17px;
        }

        .info {
            position: relative;
            z-index: 101;
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            line-height: 30px;
            opacity: 0;
            transition: opacity 1.8s cubic-bezier(0, 0, 0, 1);
            width: 100%;
            padding: 20px 4.1vw;
        }

        .link {
            width: 100%;
            opacity: 0;
            transition: opacity 1.8s cubic-bezier(0, 0, 0, 1);
            position: relative;
            z-index: 101;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 16px;
            color: #ffebeb;
            cursor: pointer;
            i {
                display: block;
                width: 14px;
                height: 14px;
                border-radius: 14px;
                margin-left: 6px;
                font-size: 10px;
                border: 1px solid #ffffff;
                text-align: center;
                line-height: 14px;
                position: relative;
                top: 2px;
            }
        }

        .bg-active {
            transition: transform 0.6s cubic-bezier(0, 0, 0, 1);
            transform: scaleX(0);
            width: 25vw;
            height: 100%;
            background-color: #176dc3;
            position: absolute;
            z-index: 100;
            left: 0;
            top: 0;
        }

        // &:nth-child(2n) {
        //     .bg-active {
        //         top: 0;
        //     }
        // }

        // &:nth-child(2n - 1) {
        //     .bg-active {
        //         bottom: 0;
        //     }
        // }

        // &:hover {
        //     .bg-active {
        //         transform: scaleX(1);
        //         opacity: 1;
        //     }

        //     .info,.title {
        //         opacity: 1;
        //     }
        // }
    }

    .active {
        .bg-active {
            transform: scaleX(1);
            opacity: 1;
        }

        .info,
        .title,
        .link {
            opacity: 1;
        }
    }
}
</style>